<script>
import outMain from "@/components/outMain.vue";
import { ElMessage, ElMessageBox } from "element-plus";

import { CrewDetail } from "@/http/api";
export default {
  components: { outMain },
  name: "",
  data() {
    return {
      detailId: this.$route.query.id,
      stepArr: [
        { name: "基本信息", id: 1 },
        { name: "船员证书", id: 2 },
        { name: "工作经历", id: 3 },
      ],
      expArr: [],
      zsArr: [],
      stepId: 1,
      formData: {},
    };
  },
  props: {},
  setup() {},
  methods: {
    navFn(item) {
      this.stepId = item.id;
    },
    daysBetween(date1, date2) {
      const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
      const firstTime = date1.getTime();
      const secondTime = date2.getTime();
      return Math.round((secondTime - firstTime) / oneDay);
    },
    getData() {
      CrewDetail({ shipowner_crew_id: this.detailId }).then((res) => {
        if (res.data.code == 1) {
          let resData = res.data.data;
          this.formData = resData;
          if (resData.zs_json) {
            let arr = resData.zs_json.filter((item) => {
              return item.number || item.time;
            });
            for (let item of arr) {
              if (item.time) {
                item["time_"] = this.daysBetween(
                  new Date(),
                  new Date(item.time)
                );
              } else {
                item["time_"] = "- -";
              }
            }
            this.zsArr = arr;
          }

          this.expArr = resData.resume_experience;
        }
      });
    },
    backFn() {
      this.$router.back();
    },
  },
  mounted() {},
  created() {
    this.getData();
  },
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formStep">
        <div class="formHead">
          <div>船舶详情</div>
          <btn value="返回上一级" @ok="backFn"></btn>
        </div>
        <div class="formMain">
          <div class="stepNav">
            <div
              :class="stepId === item.id ? 'stepItemActive' : 'stepItem'"
              @click="navFn(item)"
              :key="index"
              v-for="(item, index) in stepArr"
            >
              {{ item.name }}
            </div>
          </div>
          <div class="stepCont" v-show="stepId == 1">
            <div class="formDes">
              <div class="desTitle">基本信息</div>
              <div class="desCont">
                <div class="desItem">
                  <div class="desName">船员姓名</div>
                  <div class="desText">{{ formData.real_name }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">船员状态</div>
                  <div class="desText">
                    <el-tag v-if="formData.crew_status == 1">在职</el-tag>
                    <el-tag type="info" v-if="formData.crew_status == 2"
                      >离职</el-tag
                    >
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">船员职务</div>
                  <div class="desText">{{ formData.zw }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">手机号</div>
                  <div class="desText">{{ formData.mobile }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">身份证号</div>
                  <div class="desText">{{ formData.idcard }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">船员月薪</div>
                  <div class="desText">
                    {{ formData.qwyx
                    }}{{ formData.qwyx_dw == 1 ? "元" : "美元" }}
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">上船时间</div>
                  <div class="desText">{{ formData.sc_time }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">任职船名</div>
                  <div class="desText">{{ formData.rzcm_name }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">工服尺寸</div>
                  <div class="desText">{{ formData.gfcc }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">船员鞋码</div>
                  <div class="desText">{{ formData.shoe_size }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">婚姻状态</div>
                  <div class="desText">{{ formData.hyzk }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">紧急联系人</div>
                  <div class="desText">{{ formData.jjlxr_name }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">紧急人电话</div>
                  <div class="desText">{{ formData.jjlxr_mobile }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">创建时间</div>
                  <div class="desText">{{ formData.create_time }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">操作人</div>
                  <div class="desText">{{ formData.shipowner_admin_name }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="stepCont" v-if="stepId == 2">
            <div class="formDes flexPull flexColumn">
              <div class="desTitle">
                <div>船员证书</div>
              </div>
              <el-table
                class="tableMain"
                :data="zsArr"
                stripe
                style="width: 100%"
              >
                <el-table-column
                  prop="number"
                  show-overflow-tooltip
                  label="证书编号"
                />
                <el-table-column
                  prop="name"
                  show-overflow-tooltip
                  label="证书名称"
                />
                <el-table-column
                  prop="sy_time"
                  show-overflow-tooltip
                  label="剩余时间"
                >
                  <template #default="{ row }">
                    <span v-if="row.time_ != '- -'">
                      <span v-if="row.time_ > 180"
                        >{{ row.time_ }}天后到期</span
                      >
                      <span
                        class="orgText"
                        v-if="row.time_ >= 0 && row.time_ <= 180"
                        >{{ row.time_ }}天后到期</span
                      >
                      <span v-if="row.time_ < 0" class="redText"
                        >已到期{{ row.time_ }}天</span
                      >
                    </span>
                    <span v-else>{{ row.time_ }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="time"
                  show-overflow-tooltip
                  label="到期时间"
                >
                  <template #default="{ row }">{{
                    row.time || "- -"
                  }}</template>
                </el-table-column>
                <el-table-column
                  prop="status"
                  show-overflow-tooltip
                  label="证书状态"
                >
                  <template #default="{ row }">
                    <div class="tagGroup">
                      <el-tag type="info" v-if="row.time_ == '- -'"
                        >未完善</el-tag
                      >
                      <div v-else>
                        <el-tag type="success" v-if="row.time_ > 180"
                          >正常</el-tag
                        >
                        <el-tag
                          type="warning"
                          v-if="row.time_ <= 180 && row.time_ >= 0"
                          >即将到期</el-tag
                        >
                        <el-tag type="danger" v-if="row.time_ < 0"
                          >已到期</el-tag
                        >
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="stepCont" v-show="stepId == 3">
            <div class="formDes flexPull flexColumn">
              <div class="desTitle">
                <div>工作经历</div>
              </div>
              <el-table
                class="tableMain"
                :data="expArr"
                stripe
                style="width: 100%"
              >
                <el-table-column
                  prop="comName"
                  show-overflow-tooltip
                  label="公司"
                />
                <el-table-column prop="zw" show-overflow-tooltip label="职务" />
                <el-table-column prop="cm" show-overflow-tooltip label="船名" />
                <el-table-column prop="cx" show-overflow-tooltip label="船型" />
                <el-table-column prop="hx" show-overflow-tooltip label="航区" />
                <el-table-column prop="zd" show-overflow-tooltip label="总吨" />
                <el-table-column prop="ml" show-overflow-tooltip label="马力" />
                <el-table-column
                  prop="scsj"
                  show-overflow-tooltip
                  label="上船时间"
                />
                <el-table-column
                  prop="xcsj"
                  show-overflow-tooltip
                  label="下船时间"
                />
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </outMain>
</template>
<style scoped lang="less"></style>
